<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>按键事件</title>
    <link rel="stylesheet" href="./keycode.css" />
  </head>
  <body>
    <div id="img">
      <div class="hand"></div>
      <div id="body"></div>
      <div id="lleg"></div>
      <div id="rleg"></div>
      <div class="eye"></div>
      <div class="line"></div>
    </div>
    <div class="back"></div>
    <button class="light">浅色模式</button>
    <button class="dark">深色模式</button>
    <script>
      var button=document.querySelector(".dark")//深色
      var button1=document.querySelector(".light")//浅色
      var body=document.querySelector("body")//背景
      button.addEventListener("click",function(){
        body.style.backgroundColor="black"
      })
      button1.addEventListener("click",function(){
        body.style.backgroundColor="pink"
      })
      var ren=document.querySelector("#img")
      var rleg=document.querySelector("#rleg")//腿
      var lleg=document.querySelector("#lleg")
      var index=1;
        var sum=0;
  
     document.addEventListener("keydown", function (e) {   
  console.log(e.keyCode);
  var dong=rleg.classList.toggle("a")
     var dong=lleg.classList.toggle("b")
       
  if (e.keyCode == 39) {
    index++
     ren.style.transform=`translateX(${index+20}px)`
    //  rleg.style.transform=`rotate(${index+360}deg)`
  
  }  else if(e.keyCode==37) {
      index--
    ren.style.transform=`translateX(${index+20}%)`
  
  }else if(e.keyCode==38) {
      index--
    ren.style.transform=`translateY(${index+20}%)`

  }else if(e.keyCode==40) {
      index--
    ren.style.transform=`translateY(${-index+20}%)`

  }
});
    </script>
  </body>
</html>
